<template>
	<view style="padding-top:90rpx;">
		<u-navbar autoBack title="详情" :safeAreaInsetTop="true" :fixed="true"></u-navbar>
		<u-swiper :list="list" indicator indicatorMode="line" circular height="300" imgMode="heightFix"></u-swiper>
		<view class="u-p-20">
			<u--text :text="dataList.title" size="16" lines="2" color="#333">
			</u--text>
			<view class="u-flex u-flex-between u-p-t-20">
				<u--text mode="price" text="7287.32" size="20" color="red"></u--text>
				<u--text text="销量:250+" align="right"></u--text>
			</view>
		</view>
		<u-cell title="已选择：规格1" :isLink="true" arrow-direction="right"></u-cell>
		<u-tabs :list="list1"></u-tabs>
		<view class="u-p-t-20" style="padding-bottom: 130rpx;">
			<u--image :src="dataList.goodsUrl" width="100%"></u--image>
			<u--image :src="dataList.goodsUrl" width="100%"></u--image>
			<u--image :src="dataList.goodsUrl" width="100%"></u--image>
			<u--image :src="dataList.goodsUrl" width="100%"></u--image>
			<u--image :src="dataList.goodsUrl" width="100%"></u--image>
			<u--image :src="dataList.goodsUrl" width="100%"></u--image>
		</view>
		<view class="navigation">
			<view class="left">
				<view class="item">
					<u-icon name="server-fill" :size="24" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</view>
				<view class="item">
					<u-icon name="home" :size="24" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">店铺</view>
				</view>
				<view class="item car">
					<u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="26" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1">加入购物车</view>
				<view class="buy btn u-line-1">立即购买</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				list1: [{
					name: '商品详情',
				}, {
					name: '参数',
				}, {
					name: '评论'
				}],
				dataList: {
					goodsUrl: '//img13.360buyimg.com/n7/jfs/t1/103005/7/17719/314825/5e8c19faEb7eed50d/5b81ae4b2f7f3bb7.jpg',
					title: '【冬日限定】现货 原创jk制服女2020冬装新款小清新宽松软糯毛衣外套女开衫短款百搭日系甜美风',
					type: '灰色;M',
					deliveryTime: '付款后30天内发货',
					price: '348.58',
					number: 2
				},

			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			gotoDetail(val) {
				uni.$u.route('/pages/shopDetail/shopDetail');
			},
			getData() {
				uni.$u.http.post('/queryShuffling').then(res => {
					console.log(res, 111);
					this.list = res.data.data.map(n => n.img_url)
				}).catch(err => {
					this.$refs.uToast.error(res.data.resultInfo)
				})
			},
		}
	}
</script>
<style lang="less" scoped>
	.navigation {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		z-index: 999;

		.left {
			display: flex;
			font-size: 20rpx;
			justify-content: space-around;
			flex: 1;

			.item {
				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			margin-right: 10rpx;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>
